<template>
<div>
    <div class="head">
        <el-row>
            <el-col :span="3">任务总数：{{this.taskInfo.length}}</el-col>
            <el-col :span="21">
                <div class="button">
                    <el-button type="success" plain @click="addTask()">添加任务管理</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
    <div class="body">
        <el-table :data="taskInfo" :row-class-name="tableRowClassName" height="100%" style="width: 100%">
            <el-table-column fixed prop="fun_id" label="序号" :index="indexMethod" width="50"></el-table-column>
            <el-table-column prop="name" label="名称" width="100"></el-table-column>
            <el-table-column prop="lib_id" label="智能库"  width="100"> </el-table-column>
             <el-table-column prop="period" label="执行周期(天)"  width="150"> </el-table-column>
            <el-table-column prop="mod_id" label="模型文件" width="100"></el-table-column>
            <el-table-column prop="indata" label="输入处理库" width="150"></el-table-column>
            <el-table-column prop="outdata" label="输出处理库" width="150"></el-table-column>
            <el-table-column prop="dev" label="关联设备" width="100"></el-table-column>
            <el-table-column prop="unit_id" label="关联组件" width="100"></el-table-column>
             <el-table-column prop="note" label="说明" width="100"></el-table-column>
            <el-table-column prop="useable" label="可用性"
            :formatter="formatStatus"
             :filter-method="filterHandler" 
            :filter-multiple="false" 
           :filters="[{ text: '可用', value: '1' }, { text: '不可用', value: '0' }]"
            ></el-table-column>
            <el-table-column align="right">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="220">
                <template slot-scope="scope">
                    <el-button size="mini" type="info" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                       <el-button size="mini" type="warning" @click="handleWarning (scope.$index, scope.row)" v-if="scope.row.useable==1">禁用</el-button>
                    <el-button size="mini" type="success" @click="handleState (scope.$index, scope.row)" v-else>恢复</el-button>
                    <el-button size="mini" slot="reference" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="任务信息" :modal=false :visible.sync="dialogFormVisible1">
            <el-form :model="form">
                <el-card class="box-card">
                    <div class="infinite-list" v-infinite-scroll="load">
                        
                        <el-row>
                            <el-col :span="5">任务名称</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <template v-if='!modform'>{{form.name}}</template>
                                <template v-else>
                                    <el-input v-model="form.name"></el-input>
                                </template>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="5">任务说明</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <template v-if='!modform'>{{form.note}}</template>
                                <template v-else>
                                    <el-input v-model="form.note"></el-input>
                                </template>

                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="5">执行周期</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <template v-if='!modform'>{{form.period}}</template>
                                <template v-else>
                                    <el-input-number v-model="form.period"></el-input-number>
                                </template>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="5">智能库</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">

                                <template v-if='!modform'>{{form.lib_id}}</template>
                                <template v-else>
                                     <el-select v-model="form.lib_id" placeholder="请选择关联智能库">
                                    <el-option v-for="item in intelligent" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                                </template>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="5">关联设备</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">

                                <template v-if='!modform'>{{form.dev}}</template>
                                <template v-else>
                                     <el-select v-model="form.dev" placeholder="请选择设备">
                                    <el-option v-for="item in device" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                                </template>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="5">关联组件</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <template v-if='!modform'>{{form.unit}}</template>
                                <template v-else>
                                    <el-select v-model="form.unit" placeholder="请选择组件">
                                    <el-option v-for="item in unit" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                                </template>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="5">模型文件</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">

                                <template v-if='!modform'>{{form.model}}</template>
                                <template v-else>
                                    <el-select v-model="form.model" placeholder="请选择关联模型文件">
                                    <el-option v-for="item in modelfle" :key="item.id" :label="item.file_name" :value="item.id">
                                    </el-option>
                                </el-select>
                                </template>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="5">输入处理库</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <template v-if='!modform'>{{form.indata}}</template>
                                <template v-else>
                                    <el-select v-model="form.indata" placeholder="请选择关联数据库">
                                    <el-option v-for="item in indataprocess" :key="item.id" :label="item.file_name" :value="item.id">
                                    </el-option>
                                </el-select>
                                </template>
                            </el-col>
                        </el-row>

                          <el-row>
                            <el-col :span="5">输出处理库</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <template v-if='!modform'>{{form.outdata}}</template>
                                <template v-else>
                                    <el-select v-model="form.outdata" placeholder="请选择关联数据库">
                                    <el-option v-for="item in outdataprocess" :key="item.id" :label="item.file_name" :value="item.id">
                                    </el-option>
                                </el-select>
                                </template>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <template v-if="!modform">
                    <el-button type="primary" @click="clickMod()">点击修改</el-button>
                </template>
                <template v-else>
                    <el-button type="primary" @click="saveModform()">保存修改</el-button>
                </template>
                <el-button @click="dialogFormVisible1 = false">返回</el-button>
            </div>
        </el-dialog>

        <el-dialog title="添加任务" :modal=false :visible.sync="dialogFormVisible">
            <el-form :model="form1">  
                <el-card class="box-card">
                    <div class="infinite-list" v-infinite-scroll="load">
                        <el-row>
                            <el-col :span="7">关联设备</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <el-select v-model="form1.dev" placeholder="请选择设备">
                                    <el-option v-for="item in device" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="7">关联组件</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <el-select v-model="form1.unit" placeholder="请选择组件">
                                    <el-option v-for="item in unit" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="7">任务名称</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <el-input v-model="form1.name" placeholder="请输入任务名称"></el-input>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="7">任务执行周期</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <el-input-number v-model="form1.period" placeholder="请输入任务执行周期"></el-input-number>
                            </el-col>

                        </el-row>
                        <el-row>
                            <el-col :span="7">任务说明</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <el-input v-model="form1.note" placeholder="请输入任务说明"></el-input>
                            </el-col>

                        </el-row>
                        <el-row>
                            <el-col :span="7">智能库</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <el-select v-model="form1.lib_id" placeholder="请选择关联智能库">
                                    <el-option v-for="item in intelligent" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-col>

                        </el-row>
                        <el-row>
                            <el-col :span="7">模型文件</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <el-select v-model="form1.model" placeholder="请选择关联模型文件">
                                    <el-option v-for="item in modelfle" :key="item.id" :label="item.file_name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-col>

                        </el-row>
                        <el-row>
                            <el-col :span="7">输出处理库</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <el-select v-model="form1.outdata" placeholder="请选择关联数据库">
                                    <el-option v-for="item in outdataprocess" :key="item.id" :label="item.file_name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>

                         <el-row>
                            <el-col :span="7">输入处理库</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <el-select v-model="form1.indata" placeholder="请选择关联数据库">
                                    <el-option v-for="item in indataprocess" :key="item.id" :label="item.file_name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-col>

                        </el-row>

                    </div>
                </el-card>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="commitTask()">提交任务</el-button>
                <el-button @click="dialogFormVisible = false">返回</el-button>
            </div>
        </el-dialog>
    </div>

</div>
</template>

<script>
import axios from '@/plugins/axios' //在哪里用就在哪里引入
// require('@/mock/task_info.js')
// require('@/mock/date_lib.js')
// require('@/mock/dllalg_info.js')
// require('@/mock/taskInfo.js')
// require('@/mock/unit.js')
// require('@/mock/model_info.js')
export default {
    data() {
        return {
            taskInfo: [],
            search: '',
            dialogFormVisible: false,
            dialogFormVisible1: false,
            modform: false,
            form: {
                'name': '',
                'note': '',
                'data': '',
                'period': '',
                'dev': '',
                'lib_id': '',
                'model': '',
                're_time': '',
                'unit': ''

            },
            form1: {
                "dev":'',
                "unit":'',
                "name":'',
                "period":'',
                "note":'',
                "lib_id":'',
                "model":'',
                "indata":'',
                "outdata":''

            },
            formLabelWidth: '120px',
            device: [], //关联设备
            deviceValue: '', //选择设备
            unit: [],
            unitValue: '',
            value: '',
            taskname: '', //任务名称
            period: '', //执行周期
            note: '', //任务说明
            intelligent: [], //智能库
            intelligentValue: '', //添加任务绑定的智能库
            modelfle: [], //模型文件
            modelfleValue: '', //添加任务绑定的模型文件
            outdataprocess: [], //s输出数据处理
            outdataprocessValue: '', //添加任务绑定的数据处理库
            indataprocess: [], //s输出数据处理
            indataprocessValue: '', //添加任务绑定的数据处理库
        }
    },
    created: function () {
        ///action/task_info' 假数据接口
        axios.get('/action/task_status').then((res) => {
            this.taskInfo = res.data.task_info
        })

        //关联数据库
        axios.get('/action/getdata_status').then((res) => {
            for(let i=0;i<res.data.getdata_info.length;i++){
                if(res.data.getdata_info[i].type=='1'){
                    console.log(res.data.getdata_info[i].type);
                    this.outdataprocess.push(res.data.getdata_info[i])
                }

                if(res.data.getdata_info[i].type=='2'){

                    this.indataprocess.push(res.data.getdata_info[i])
                }
            }
                console.log(this.outdataprocess);
        })
        //关联智能库
        axios.post('/action/dllalg_status').then((res) => {
            this.intelligent= res.data.dllalg_info
        })
         //关联组件
        axios.post('/action/unit_status').then((res) => {
            this.unit= res.data.unit_info
        })
        //关联设备信息
        axios.get('/action/devices_info').then((res) => {
            this.device=res.data.device_info
            console.log(this.device);
        })
        //关联组件
        // axios.get('/action/unit_info').then((res) => {
        //     for (let i = 0; i < res.data.length; i++) {
        //         this.unit[i] = {
        //             "id": res.data[i].id,
        //             "name": res.data[i].name
        //         }
        //     }
        // })

        axios.get('/action/mod_status').then((res) => {
            this.modelfle=res.data.model_info
        })

    },
    methods: {
        formatName: function (row, column) {
            for(let i=0;i<this.intelligent.length;i++){
                if(row.lib_id==this.intelligent[i].lib_id){
                    alert("this.intelligent[i].name")
                    return  this.intelligent[i].name
                }
            }
        },
          filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        },
        formatStatus: function (row, column) {
            return row.useable == 1 ? '可用' : row.useable == 0 ? '不可用' : '未知';
        },
        indexMethod(index) {
            return index;
        },
        load() {
            this.count = 2;
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        //离线浅红，在线浅蓝
        tableRowClassName({ row,rowIndex}) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        },
        Search(index, row) {
            console.log(index, row);
        },

        handleEdit(index, row) {
            console.log(row);
            this.form={
                "id":row.fun_id,
                "dev":row.dev,
                "unit":row.unit_id,
                "name":row.name,
                "period":row.period,
                "note":row.note,
                "lib_id":row.lib_id,
                "model":row.mod_id,
                "indata":row.indata,
                "outdata":row.outdata
            }
            this.dialogFormVisible1 = true;
        },
        clickMod(){
            this.modform =true;
            this.form.dev='';
            this.form.unit='';
            this.form.lib_id='';
            this.form.model='';
            this.form.indata='';
            this.form.outdata='';
        },
        //恢复
        handleState(index, row) {
            let data={"id":row.fun_id,"oper":'5'}
            axios.post('/action/task_oper',data).then((res)=>{
                if(res.data.code=='1'){
                     axios.get('/action/task_status').then((res) => {
                     this.taskInfo = res.data.task_info
                     })
                }else{
                   this.$message.error('恢复失败，请联系管理员！');
                    axios.get('/action/task_status').then((res) => {
                    this.taskInfo = res.data.task_info
                 })
                }
            })
        },
        //禁用
        handleWarning(index, row) {
            let data={"id":row.fun_id,"oper":'4'}
            axios.post('/action/task_oper',data).then((res)=>{
                if(res.data.code=='1'){
                    axios.get('/action/task_status').then((res) => {
                    this.taskInfo = res.data.task_info
                })
                }else{
                   this.$message.error('禁用失败，请联系管理员！');
                    axios.get('/action/task_status').then((res) => {
                     this.taskInfo = res.data.task_info
                     })
                }
            })
        },
        //删除
        handleDelete(index, row) {
            let data = {
                "oper": '1',
                "id": row.fun_id
            }
            axios.post('/action/task_oper', data).then((res) => {
                if (res.data.code == 1) {
                   this.$message({
                          message: row.name+'删除成功',
                          type: 'success'
                     });
                     axios.get('/action/task_status').then((res) => {
                    this.taskInfo = res.data.task_info
                      })
                } else {
                    this.$message.error('删除失败，请联系管理员！');
                }
            })
        },

        //添加任务
        addTask() {
            this.dialogFormVisible = true;
            // this.form1={

            // }
        },

        //提交任务
        commitTask() {
            console.log("添加的任务信息如下.....");
            console.log(this.form1);
            this.form1.oper='2'
            axios.post('/action/task_oper',this.form1).then((res)=>{
                if(res.data.code=='1'){
                   this.$message({
                          message: '添加成功',
                          type: 'success'
                     });
                    this.dialogFormVisible = false;
            this.form1={
                'name': '',
                'note': '',
                'outdata': '',
                'indata': '',
                'period': '',
                'dev': '',
                'lib_id': '',
                'model': '',
                'unit': ''

            }
                 axios.get('/action/task_status').then((res) => {
                    this.taskInfo = res.data.task_info
                   })
                }else{
                    this.$message.error('添加失败，请联系管理员！');
                    this.dialogFormVisible = false;
            this.form1={
                'name': '',
                'note': '',
                'outdata': '',
                'indata': '',
                'period': '',
                'dev': '',
                'lib_id': '',
                'model': '',
                'unit': ''

            }
                }
            })
        },

        //修改任务
        saveModform(){
            console.log("修改的任务信息如下.....");
            console.log(this.form);
          this.form.oper='3'
            axios.post('/action/task_oper',this.form).then((res)=>{
                if(res.data.code=='1'){
                   this.$message({
                          message: row.name+'修改成功',
                          type: 'success'
                     });
                    this.modform = false;
                     this.dialogFormVisible1 = false;
            this.form={
                "dev":'',
                "unit":'',
                "name":'',
                "period":'',
                "note":'',
                "lib_id":'',
                "model":'',
                "indata":'',
                "outdata":''

            };
             axios.get('/action/task_status').then((res) => {
                    this.taskInfo = res.data.task_info
                   })
             }else{
                   this.$message.error('修改失败，请联系管理员！');
                    this.modform = false;
                      this.dialogFormVisible1 = false;
                 this.form= {
                "dev":'',
                "unit":'',
                "name":'',
                "period":'',
                "note":'',
                "lib_id":'',
                "model":'',
                "indata":'',
                "outdata":''

                  }
                }
            })

        }
    }

}
</script>

<style scoped>
 .el-table .warning-row {
    background: rgb(235, 91, 55);
  }

  .el-table .success-row {
    background: #8aec56;
  }
  .el-input{
      width: 220px;
  }
  .el-input-number{
      width: 220px;
  }

.head{
    position:absolute;
    top:15%;
    left: 14.5%;
    width: 82%;
    padding: 3px;
    margin: 0px;
    height: 40px;
    border: 1px solid black;
}
.button{
    position:absolute;
    left: 89%;
}
.body{
    position:absolute;
    top:23%;
    left: 14.5%;
    width: 82%;
    padding: 3px;
    margin: 0px;
    height: 73%;
    border: 1px solid black;
}
</style>
